<template>
    <div class="box">
        <h2 class="pd_title">{{ title }}</h2>
        <div class="pd_list" v-if="booksList.length">
            <div class="pd_item" v-for="(item,index) in booksList" :key="index" @click="toDetail(item)">
                <img :src="item.cover? item.cover:srcImg" alt="">
                <p class="book_name" :title="'《'+item.name+'》：'+item.description">《{{ item.name }}》：{{ item.description }}</p>
                <p class="book_author">作者：{{ item.author }}</p>
                <p>
                    <span>{{ item.price }}元</span>
                </p>
            </div>
        </div>
        <div v-else class="noData">暂无数据...</div>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
    props: {
        booksList: Array,
        title: String,
    },
    data() {
        return {
            srcImg: "@/assets/test03.png",
        };
    },
    created() {},
    methods: {
        toDetail(row) {
            const hasToken = getToken();
            if (hasToken) {
                this.$router.push({
                    name: "Detail",
                    query: {
                        id: row.id,
                    },
                });
            } else {
                this.$router.push("/login");
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.box {
    width: 1000px;
    margin: 0 auto;

    .pd_title {
        font-size: 26px;
        font-weight: 700;
        height: 58px;
        line-height: 58px;
        color: #333;
    }
    .pd_list {
        overflow: hidden;
        .pd_item {
            background-color: #f4f4f4;
            padding: 10px 0;
            text-align: center;
            width: 190px;
            height: 236px;
            margin: 0 5px 10px;
            float: left;
            transition: all 0.2s linear;
            img {
                height: 140px;
            }
            p {
                font-size: 12px;
                line-height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 10px;
                color: #333;
                span {
                    color: #c30;
                    font-weight: 700;
                }
            }
            .book_name {
                &:hover {
                    color: #ec7814;
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
            .book_author {
                color: #aaa;
            }
            &:hover {
                z-index: 2;
                cursor: pointer;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                transform: translate3d(0, -2px, 0);
            }
        }
    }
    .noData {
        // background-color: #ccc;
        text-align: center;
        font-size: 20px;
        margin: 20px 0;
    }
}
</style>
